<template>
  <el-tabs type="border-card" v-model="defaultTab">
    <el-tab-pane label="原始脚本配置" name="1">
      <el-button class="button" type="primary" @click="handleSaveAndRun"
        >保存并运行</el-button
      >
      <Codemirror
        v-model:value="code"
        :options="cmOptions"
        placeholder="test placeholder"
        :height="500"
        @change="change"
        ref="myCM"
      />
      <div style="height: 500px">a:{{feedback}}</div>
    </el-tab-pane>
    <el-tab-pane label="路由器配置" name="2">
      <json-form :chosen-machine="chosenMachine" />
    </el-tab-pane>
    <el-tab-pane label="运行测试" name="3">
      <el-button class="button" type="primary" @click="checkTopo"
        >测试</el-button
      >
      <div>{{ checkRate }}</div>
      <div>{{checkFeedback}}</div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import JsonForm from "./JsonForm.vue";
import Codemirror from "codemirror-editor-vue3";

// language
import "codemirror/mode/javascript/javascript.js";
import bus from "../util/bus";
import { saveAndRun } from "../util/common";
import { checkTopo } from "../api/manage";

// theme

export default {
  name: "ConfigTabs",
  components: {
    JsonForm,
    Codemirror,
  },
  computed: {
    config() {
      console.log("[[ config in ConfigTabs ]]", this.$store.state.config)
      return JSON.stringify(this.$store.state.config, null, 4);
    },
  },
  data() {
    return {
      chosenMachine: "",
      defaultTab: "",
      newConfig: this.config,
      feedback: "",
      checkFeedback: "",
      checkRate: ""
    };
  },
  setup() {
    return {
      code: "",
      cmOptions: {
        mode: "text/javascript", // 语言模式
        theme: "default", // 主题
        lineNumbers: true, // 显示行号
        smartIndent: true, // 智能缩进
        indentUnit: 8, // 智能缩进单位为4个空格长度
        foldGutter: true, // 启用行槽中的代码折叠
        styleActiveLine: true, // 显示选中行的样式
      },
      
    };
  },
  mounted() {
    this.code = this.config;

    bus.$on("selectEle", (key) => {
      // 点击路由器或者switch，对应传来router名（eg : RouterA）
      this.chosenMachine = key.data;
      this.defaultTab = "2";
    });

    bus.$on("changeJson", () => {
      this.code = this.$store.state.config;
      console.log("[[ changeJson ]]", this.code.topotype);
    })

    setTimeout(() => {
      this.$refs.myCM.cminstance.refresh();
      this.defaultTab = "1";
    }, 1);
  },

  methods: {
    async handleSaveAndRun() {
      const { id, results } = await saveAndRun(this.code);
      this.$store.commit("newConfig", JSON.parse(this.code));
      this.$store.commit("newConfigId", id);
      bus.$emit('changeJson');

      this.feedback = results?.map(r => `${r.device}# ${r.cmd}\n ${r.rsp}`).join('\n');
      console.log(typeof this.feedback);
    },
    change(val, cm) {
        this.newConfig = val;
    },
    async checkTopo() {
      const res = await checkTopo(JSON.parse(this.newConfig).topotype);
      // console.log(JSON.parse(this.newConfig));
      console.log("[[ checkTopo() ]]", res);
//       {
//     "code": 0,
//     "msg": "success",
//     "data": {
//         "rate": "NaN",
//         "results": []
//     }
// }
      this.checkRate = res.data.rate;
      this.checkFeedback = res.data?.results.map(r => `${r.device}# ${r.cmd}\n ${r.actual}`).join('\n');
    }
  }
};
</script>

<style scope>
</style>